<div class="mdc-data-table" style="display: flex">
  <table class="mdc-data-table__table" aria-label="Dessert calories">
    <thead>
      <tr class="mdc-data-table__header-row">
        <th
          class="mdc-data-table__header-cell mdc-data-table__header-cell--with-sort"
          role="columnheader"
          scope="col"
          aria-sort="none"
          data-column-id="dessert"
        >
          <div class="mdc-data-table__header-cell-wrapper">
            <div class="mdc-data-table__header-cell-label">Dessert</div>
            <cv-icon
              class="mdc-data-table__sort-icon-button"
              aria-label="Sort by dessert"
              aria-describedby="dessert-status-label"
              >arrow_upward</cv-icon
            >
            <div
              class="mdc-data-table__sort-status-label"
              aria-hidden="true"
              id="dessert-status-label"
            ></div>
          </div>
        </th>
        <th
          class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort mdc-data-table__header-cell--sorted"
          role="columnheader"
          scope="col"
          aria-sort="ascending"
          data-column-id="carbs"
        >
          <div class="mdc-data-table__header-cell-wrapper">
            <cv-icon
              class="mdc-data-table__sort-icon-button"
              aria-label="Sort by carbs"
              aria-describedby="carbs-status-label"
            >
              arrow_upward
            </cv-icon>
            <div class="mdc-data-table__header-cell-label">Carbs (g)</div>
            <div
              class="mdc-data-table__sort-status-label"
              aria-hidden="true"
              id="carbs-status-label"
            ></div>
          </div>
        </th>
        <th
          class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric mdc-data-table__header-cell--with-sort"
          role="columnheader"
          scope="col"
          aria-sort="none"
          data-column-id="protein"
        >
          <div class="mdc-data-table__header-cell-wrapper">
            <cv-icon
              class="mdc-data-table__sort-icon-button"
              aria-label="Sort by protein"
              aria-describedby="protein-status-label"
            >
              arrow_upward
            </cv-icon>
            <div class="mdc-data-table__header-cell-label">Protein (g)</div>
            <div
              class="mdc-data-table__sort-status-label"
              aria-hidden="true"
              id="protein-status-label"
            ></div>
          </div>
        </th>
        <th
          class="mdc-data-table__header-cell"
          role="columnheader"
          scope="col"
          data-column-id="comments"
        >
          Comments
        </th>
      </tr>
    </thead>
    <tbody class="mdc-data-table__content">
      <tr class="mdc-data-table__row">
        <td class="mdc-data-table__cell">Frozen yogurt</td>
        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
        <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
        <td class="mdc-data-table__cell">Super tasty</td>
      </tr>
    </tbody>
  </table>
</div>
